<template>
  <div class="container">
    <div class="close"><span class="iconfont iconicon-test"></span></div>
    <div class="logo"><span class="iconfont iconnew"></span></div>
    <div class="inputs">
      <hminput v-model="user.nickname" placeholder="昵称"></hminput>
      <hminput
        placeholder="请输入用户名 / 手机号码"
        v-model="user.username"
        :rules="/^1\d{10}$|^1\d{4}$/"
        msg="手机号输入不合法 1  我是msg input封装里的组件传参"
      >
      </hminput>
      <hminput v-model="user.password" placeholder="请输入用户密码"></hminput>
    </div>
    <p class="tips">
      已有账号？
      <a href="#/login" class="">去登陆</a>
    </p>
      <!-- 使用模块 -->
      <hmbutton @click="register" type="danger">
        <span>注册</span>
      </hmbutton>
  </div>

</template>
<script>
// 引入按钮封装模块
import hmbutton from "@/components/hmbutton.vue";
import hminput from "@/components/hminput.vue";
// 引入登录方法
// import { userlogin } from "@/apis/user.js";
import { userRegister } from "@/apis/user.js";

export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
        nickname: "",
      },
    };
  },
  // 注册模块
  components: {
    hmbutton,
    hminput,
  },
  methods: {
    async register() {
      let res = await userRegister(this.user);
      console.log(res);

      if (res.data.message == '注册成功') {
        this.$toast.success(res.data.message);
        //  进行路由自动跳转
        this.$router.push({ name: 'login' });
      } else {
        this.$toast.success('注册失败，请重试');
      }
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    // font-size: 127 / 360 * 100vw;
    font-size: 25px;
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 120px;
    // font-size: 200 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>